<template>
  <el-form-item label="日期时间:" label-width="80px">
    <el-date-picker 
      @change="handleChangeDate()"
      v-model="dateTime"
      :type="type== 'monthrange' ? 'monthrange':'daterange'"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptionsDate"
      :clearable="false"
      />
  </el-form-item>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
  name: 'ChannelDate',
  props: {
    value: [String, Number, Array],
    type: {
      type: [String],
      default: 'daterange'
    }
  },
  model: {
    prop: "value", //绑定的值，通过父组件传递
    event: "pick" //自定义事件名
  },

  data() {
    const that = this;
    return {
      dateTime: '',
      dateWeekStart: '',
      dateWeekEnd: '',
      pickerOptionsDate: {
        shortcuts: [ {
          text: that.type == 'daterange' ? '最近七天' : that.type == 'weekrange' ? '过去四周' : '过去三个月',
          onClick(picker) {
            that.handleDefault(picker)
          }
        }],
        // disabledDate: function (date){
        //   return date > that.formatServerTime()
        // }
      },
    }
  },

  created(){
    this.handleDefault()
  },
  methods: {
    formatServerTime() {
      return new Date()
    },
    handleDefault(picker){
      const that = this;
      
      switch(that.type) {
        case 'daterange':
          that.handleRecentSevenDate(picker || that)
          break;
        case 'weekrange':
          that.handleRecentFourWeek(picker || that)
          break;
        case 'monthrange':
          that.handleRecentThreeMonth(picker || that)
          break;
      }
    },
    handleDefaultDate(){
      const that = this;
      const start = that.dateTime[0]
      const end = that.dateTime[1]
      switch(that.type) {
        case 'daterange':
          // this.dateTime = [this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59']
          break;
        case 'weekrange':
          const startDay = start.getDay() > 0 ? start.getDay() : 7
          const endDay = end.getDay() > 0 ? end.getDay() : 7
          const startMondayTime = start.getTime() - (startDay - 1) * 24 * 60 * 60 * 1000
          const endSundayTime = end.getTime() + (7 - endDay) * 24 * 60 * 60 * 1000
          this.dateTime = [new Date(startMondayTime), new Date(endSundayTime)]
          break;
        case 'monthrange':
          start.setDate(1)
          end.setMonth(end.getMonth() + 1)
          end.setDate(0)
          that.dateTime = [start, end]
          break;
      }
    },
    handleChangeDate() {
      this.handleDefaultDate()
      this.$emit('pick', this.dateTime)
      this.$emit('change', this.dateTime)
    },
    // 当前月份
    handleRecentThreeMonth(picker){
      const start = this.formatServerTime();
      const end = this.formatServerTime();
      end.setMonth(end.getMonth() );
      start.setMonth(start.getMonth());
      this.dateTime = [start, end]
      this.handleDefaultDate()
      picker && picker.$emit('pick', this.dateTime);
    },
    // 最近四周
    handleRecentFourWeek(picker){
      const end = this.formatServerTime();
      const start = this.formatServerTime();
      end.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 28)
      this.dateTime = [start, end]
      this.handleDefaultDate()
      picker && picker.$emit('pick', this.dateTime);
    },
    // 最近七天
    handleRecentSevenDate(picker) {
      let start, end;
      start = this.formatServerTime();
      start.setTime(start.getTime() - 6 * 24 * 60 * 60 * 1000);
      start.setHours(0, 0, 0, 0);
      end = this.formatServerTime();
      end.setTime(end.getTime() - 24 * 60 * 60 * 1000);
      end.setHours(23, 59, 59, 0);
      this.dateTime = [start, end]
      this.handleDefaultDate()
      picker && picker.$emit('pick', this.dateTime);
    }
  },
}
</script>
<style lang="scss" scoped>
</style>
